﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<!--    <script src="../../layui/layui.js"></script>-->
<!--    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">-->
<!--    <link rel="stylesheet" href="../../css/publish.css" media="all">-->
<!--    <script type="text/javascript" src="../../js/move.js"></script>-->
<!--    <script type="text/javascript" src="../../js/publishImg.js"></script>-->

    <link rel="stylesheet" href="/componentsponents/layuiadmin/layui/src/css/layui.css">
    <script src="/componentsponents/layuiadmin/layui/src/layui.js"></script>

    <script src="/manage/js/app.js"></script>

</head>
<body>
    <div style="width:1140px; margin:0 auto;">
        <div class="layui-tab layui-tab-card">
            <div class="layui-form" style="padding: 20px 0 0 0;">     
                <div class="layui-form-item">
                    <label class="layui-form-label">图片上传</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload-list layui-icon" id="addZmImg">
                            &#xe64a;
                        </div>
                    </div>
                </div>
                <div class="">
                    <ul id="imgZmList"></ul>
                </div>
            </div>
        </div>
        <div id="cropperdiv"></div>
    </div>
    <script>
        layui.config({
            base: "../../components/cropper/js/"
        });
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['form', 'upload'], function () {
            var form = layui.form
                , $ = layui.jquery
                , upload = layui.upload;

            //证明多图片上传
            upload.render({
                elem: '#addZmImg'
                , url: '/user/upload.asp'
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#imgZmList').append('<li style="position:relative"><img name="imgZmList" src="' + result + '"width="150" height="113"><div class="title_cover" name="imgZmName" onclick="divClick(this)"></div><div class="img_edit layui-icon" onclick="croppers_pic(this)">&#xe642;</div><div class="img_close" onclick="deleteElement(this)">X</div></li>');
                        form.render();
                        imgMove("imgZmList");
                    });
                }
                , done: function (res) {
                    //上传完毕
                }
            });
        });
    </script>

</body>
</html>